<template>
    <div class="project-layout">
        <el-card class="box-card project-detail">
            <div slot="header">
                <span>{{project.title}}</span>
                <el-button v-if="isAdmin" style="float: right; padding: 3px 0; margin: 0 0 0 20px; color:#E6A23C" icon="el-icon-edit" type="text" @click="editBox = true">
                </el-button>
                <el-button style="float: right; padding: 3px 0;" icon="el-icon-refresh" type="text" @click="getDetail">
                </el-button>
            </div>
            <div class="description" v-html="viewHTML"></div>
        </el-card>
        <div class="project-right-part">
            <el-card class="box-card">
                <div slot="header">
                    <span>项目统计</span>
                    <el-button style="float: right; padding: 3px 0;" icon="el-icon-refresh" type="text" @click="getStatus"></el-button>
                </div>
                <div class="project-status text_orange"><i class="el-icon-star-on"></i> 设计中 {{stateMapping[0]}}</div>
                <div class="project-status text_blue"><i class="el-icon-star-on"></i> 进行中 {{stateMapping[1]}}</div>
                <div class="project-status text_red"><i class="el-icon-star-on"></i> 异常 {{stateMapping[2]}}</div>
                <div class="project-status text_green"><i class="el-icon-star-on"></i> 已完成 {{stateMapping[3]}}</div>
                <div class="project-status text_gray"><i class="el-icon-star-on"></i> 已废弃 {{stateMapping[4]}}</div>
            </el-card>
            <br>
            <el-card class="box-card user_model" v-if="token">
                <div slot="header">
                    <span>参与人员</span>
                    <el-button v-if="isAdmin" style="float: right; padding: 3px 0; margin: 0 0 0 20px; color:#E6A23C" icon="el-icon-circle-plus-outline" @click="addUser = true" type="text" title="添加人员"></el-button>
                    <el-button style="float: right; padding: 3px 0;" icon="el-icon-refresh" @click="getProjectUser" type="text" title="刷新"></el-button>
                </div>
                <div class="user_model_body">
                    <userItem v-for="(item,index) in userList" :key="index" :projectUser="item" :isRoot="isAdmin" :getProjectUser="getProjectUser"></userItem>
                </div>
            </el-card>
        </div>
        <div class="project-user-part"></div>
        <el-drawer :title="'编辑项目'" :wrapperClosable="false" :direction="'ltr'" append-to-body destroy-on-close size="1000px" :visible.sync="editBox">
            <editProject :closeEvent="closeEdit"></editProject>
        </el-drawer>
        <el-drawer :title="'添加项目人员'" :wrapperClosable="false" :direction="'rtl'" append-to-body destroy-on-close size="500px" :visible.sync="addUser">
            <addUser :closeEvent="closeAddUser" :getUserList="getUserList" :refresh="getProjectUser"></addUser>
        </el-drawer>
    </div>
</template>
<script>
import { mapState } from 'vuex';
import editProject from './editProject';
// var showdown  = require('showdown')
import showdown from 'showdown';
import userItem from './userItem';
import addUser from './addUser';

const { shell } = require('electron');

export default {
    components: {
        editProject,
        userItem,
        addUser
    },
    data() {
        return {
            addUser: false,
            editBox: false,
            view: new showdown.Converter(),
            viewHTML: '',
            stateMapping: { 0: 0, 1: 0, 2: 0, 3: 0, 4: 0, },
            isAdmin: false,
            userList: [],
        }
    },
    computed: {
        ...mapState("mainOptions", {
            project: state => state.project,
            token: state => state.token,
            service: state => state.service,
        }),
    },
    mounted() {
        if (this.token && this.token == this.project.ownerUser || this.service == 'root') {
            this.isAdmin = true;
        };
        this.getDetail();
        this.getStatus();
        this.getProjectUser();
    },
    methods: {
        getProjectUser() {
            if (!this.token) {
                return
            };
            window.action.project.getProjectUser().then((res) => {
                this.userList = [];
                this.$nextTick(() => {
                    this.userList = res;
                });
            });
        },
        getDetail() {
            window.action.project.getDetail(this.project.projectId).then((res) => {
                this.viewHTML = this.view.makeHtml(res.description);
                this.$nextTick(function () {
                    var a = document.getElementsByTagName("a");
                    for (let i = 0; i < a.length; i++) {
                        const element = a[i];
                        element.onclick = function (event) {
                            event.preventDefault();
                            shell.openExternal(this.href);
                        }
                    };
                });
                if (this.project.title != res.title || this.project.description != res.description) {
                    this.$store.dispatch('mainOptions/setProjectDetail', {
                        title: res.title,
                        description: res.description,
                    });
                    this.$electron.ipcRenderer.send('updata-window-param', JSON.stringify({
                        winId: this.$win.id,
                        title: res.title,
                        description: res.description,
                    }));
                };
            });
        },
        getUserList() {
            return this.userList;
        },
        getStatus() {
            window.action.project.getStatusGrounp(this.project.projectId).then((res) => {
                this.stateMapping = { 0: 0, 1: 0, 2: 0, 3: 0, 4: 0 };
                for (let i = 0; i < res.length; i++) {
                    const element = res[i];
                    this.stateMapping[element.status] = element.num
                };
            });
        },
        closeAddUser(isRefresh) {
            this.addUser = false;
            if (isRefresh) {
                this.getProjectUser();
            };
        },
        closeEdit() {
            this.editBox = false;
            this.getDetail();
        },
    }
}
</script>